
<template>
  <div>
    <div class="search-container">
      <input
        v-model="searchText"
        type="text"
        class="search-input"
        placeholder="输入你的ID"
      >
      <button class="search-button" @click="search">搜索</button>
    </div>
    <!-- 原来的表格 -->
    <div v-if="tableData.length > 0" class="a">
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="ID"
          width="180"
        />
        <el-table-column
          prop="name"
          label="姓名"
          width="180"
        />
        <el-table-column
          label="证书"
          width="180"
        >
          <template slot-scope="scope">
            <button class="view-button" @click="showCongratulationModal(scope.row)">查看</button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 新的表格 -->
      <div style="margin-top: 40px;width: 280px;">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="证书列表" width="280">
        <template>
          <div style="width: 200px;">
            <span>恭喜你获得一张证书点击可</span>
            <el-button type="text" @click="viewCertificate">查看</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      tableData: [], // 初始时表格数据为空数组
      congratulationModalVisible: false, // 恭喜弹出框的显示状态
      selectedCertificate: null // 选中的证书对象
    }
  },

  methods: {
    search() {
      // 在这里处理搜索逻辑
      // 假设我们有一个API来获取ID对应的学生信息
      // 这里我们使用一个示例数据
      const student = { id: this.searchText, name: '雪豹', certificate: '证书A' }
      this.tableData = [student] // 更新表格数据
    },
    showCongratulationModal(row) {
      this.selectedCertificate = row
      this.congratulationModalVisible = true
    }
  }
}
</script>

<style>
.search-container {
  display: flex;
  align-items: center;
  border: 1px solid #ddd; /* 边框颜色 */
  border-radius: 4px; /* 圆角 */
  overflow: hidden; /* 防止边框线条不连贯 */
  width: 500px;
  margin: auto;
  margin-top: 40px;
}
.certificate-modal-content {
  text-align: center;
  margin: auto;
  height: 100%; /* 自动调整或固定高度 */
  display: flex;
  align-items: center;
  justify-content: center; /* 垂直居中 */
}
/* 去除多余的下划线 */
.a {
  border-bottom: 0;
    width: 540px;
    height: 50px;
    margin-left: 388px;
    margin-top: 70px;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  background-color: #fff; /* 背景颜色为白色 */
  color: #333; /* 字体颜色 */
  padding: 8px 12px;
  font-size: 16px;
}

.search-button {
  border: none;
  outline: none;
  background-color: #2196f3; /* 蓝色背景 */
  color: #fff; /* 字体颜色 */
  padding: 8px 16px;
  border-radius: 0 4px 4px 0; /* 圆角 */
  cursor: pointer;
  font-size: 16px;
}

.search-button:hover {
  background-color: #1e88e5; /* 鼠标悬停时的背景颜色 */
}

.view-button {
  background-color: #e1f5fe; /* 浅蓝色背景 */
  color: #333; /* 字体颜色 */
  border: none;
  outline: none;
  padding: 4px 8px;
  border-radius: 4px; /* 圆角 */
  cursor: pointer;
  font-size: 14px;
}

.view-button:hover {
  background-color: #bbdefb; /* 鼠标悬停时的背景颜色 */
}

.certificate-modal-content {
  text-align: center;
  margin: auto;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
